<template>
  <NewCard title="审核结果">
    <div class="score">
      <div class="scoreTitle">
        <h3>合同智能审核报告</h3>
        <p>Contract review report</p>
      </div>
      <div class="scoreNum">82<span>分</span></div>
    </div>
    <div class="pointList">
      <p class="pointTitle">共审核了 <span>12</span> 项审核要点</p>
      <ul>
        <li>
          <p>合同主体<i class="el-icon-success"></i></p>
          <span>对房东是否有权出租进行审核</span>
        </li>
        <li>
          <p>房产<i class="el-icon-success"></i></p>
          <span
            >房产是不是违法建筑以及能否进行出租房产是不是违法建筑以及能否进行出租</span
          >
          <span>房产位置是否明确</span>
        </li>
        <li>
          <p>房产用途<i class="el-icon-success"></i></p>
          <span>房产是商用还是自居用途</span>
        </li>
        <li>
          <p>房产设施<i class="el-icon-warning"></i></p>
          <span>房产的主体设施和附属设施</span>
        </li>
        <li>
          <p>房产<i class="el-icon-success"></i></p>
          <span
            >房产是不是违法建筑以及能否进行出租房产是不是违法建筑以及能否进行出租</span
          >
          <span>房产位置是否明确</span>
        </li>
      </ul>
    </div>
    <div class="shareBtn">
      <el-button round>分享报告</el-button>
      <el-button round>咨询专家</el-button>
    </div>
  </NewCard>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
export default {
  name: "AuditResult",
  components: { NewCard },
};
</script>

<style scoped>
ul,
p {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 审核得分 */
.score {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f0f4ff;
  border-radius: 10px;
  padding: 20px;
  margin-top: 15px;
}
.score .scoreTitle h3 {
  margin: 0;
  color: #39486f;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
.score .scoreTitle p {
  color: #ccd0db;
  font-size: 16px;
}
.score .scoreNum {
  background-color: #fff;
  color: #39486f;
  font-weight: bold;
  font-size: 32px;
  padding: 12px 32px;
  border-radius: 32px;
}
.score .scoreNum > span {
  font-size: 12px;
  padding-left: 8px;
  font-weight: 400;
  color: #8b98b9;
}
/* 审核列表 */
.pointList {
  margin-top: 25px;
  margin-bottom: 100px;
}
.pointList .pointTitle {
  font-size: 14px;
  color: #999;
  margin-bottom: 12px;
}
.pointList .pointTitle > span {
  color: #f87a23;
}
.pointList ul > li {
  padding: 15px 20px;
  border-radius: 12px;
  border: 1px solid #efefef;
  margin-bottom: 14px;
}
.pointList ul > li > p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: bold;
}
.pointList ul > li > span {
  display: block;
  font-size: 14px;
  line-height: 24px;
  color: #999;
}

.pointList .el-icon-success {
  color: #4fb256;
}
.pointList .el-icon-warning {
  color: #f87a23;
}

/* 底部按钮 */
.shareBtn {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 20px 0;
  background-color: #fff;
  border-top: 1px solid #efefef;
  text-align: center;
}
.shareBtn .el-button {
  border: 1px solid #f87a23;
  color: #f87a23;
  padding: 10px 70px;
  font-weight: bold;
}
.shareBtn .el-button:last-child {
  background-color: #f87a23;
  color: #fff;
}
.shareBtn .el-button:hover {
  background-color: #fff;
}
.shareBtn .el-button:last-child:hover {
  background-color: #f87a23;
  opacity: 0.9;
}
</style>